What is the difference between disabled and readonly?

Difference Between Disabled and Readonly Attributes

In HTML forms, both disabled and readonly restrict user interaction with form controls, but they behave differently in terms of usability and form submission.

Key Differences

1
disabled: The input cannot be focused, edited, or submitted. It is skipped when the form is submitted.
2
readonly: The input cannot be edited by the user but can still be focused, copied, and will be included in the form submission.
3
disabled is often used for temporarily unavailable fields (e.g., a locked option).
4
readonly is often used when values should be visible but not editable (e.g., showing a username).

Example of Disabled vs Readonly

Difficulty: 2/10

Topics: form controls, accessibility, user interaction

Scenario Questions

0-2 years experience

1
How would you make a text input that the user can see but not edit, and why would you choose readonly over disabled?
2
If you add the disabled attribute to a button inside a form, what happens when the form is submitted?
3
What visual differences do browsers typically show for disabled versus readonly fields?

2-5 years experience

1
You have a form where some fields should be submitted but not edited by the user. You used disabled, but the backend isn’t receiving those values. How would you fix it?
2
During a QA test, a user reports they can’t copy text from a readonly textarea. Explain why and how you’d address it.
3
Explain the impact of using disabled on form‑validation scripts that rely on input events.

5-8 years experience

1
Design a reusable component library for forms that needs to support both disabled and readonly states while maintaining accessibility standards. What considerations guide your implementation?
2
In a large SPA you notice that toggling disabled on many inputs causes UI lag. What could be causing this and how would you mitigate it?
3
How would you ensure that server‑side rendering of forms correctly reflects disabled vs readonly states across browsers and assistive technologies?

8+ years experience

1
Your organization is migrating a legacy monolithic web app to a micro‑frontend architecture. How would you standardize handling of disabled vs readonly across teams to avoid inconsistencies and maintain accessibility compliance?
2
When defining a design system, what guidelines would you set for when to use disabled versus readonly, and how would you enforce them across multiple product lines?
3
Consider a regulatory requirement that certain fields must never be edited after submission but must be auditable. How would you architect the front‑end and back‑end to enforce this using disabled/readonly or alternative patterns?

Follow-up Questions

❓Can you give an example where using disabled caused a loss of submitted data?
❓How do screen readers announce a readonly field versus a disabled one?
❓What would you do if you need the value sent but also want the field to look disabled?